<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>ODPS</title>
    <link rel="stylesheet" type="text/css" href="css/odpsIndex.css">
    <link rel="stylesheet" type="text/css" href="css/odpsLast.css">
    <link rel="stylesheet" href="../bgAll/css/common.css" type="text/css"/>
    <link rel="stylesheet" href="css/animate.min.css" type="text/css"/>
     <link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css"/>
<style type="text/css">
.fakeloader{position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 999;background-image: url(../bgAll/img/bg.png);}
</style>
</head>
<body class="wrap">
<div class="fakeloader"></div>
<div class="mod-star-list">
    <div class="inner">
    </div>
</div>
    <!-- header Start -->
<div id="header" class="mt12 clearfix" style="margin-left:10px; position: absolute; z-index:999">
            <div class="header-left">
                <a href="../ECS/index.html" class="clearfix">
                    <div class="bg-next rotate5 btn"></div>
                    <p>浏览下一个产品</p>
                </a>
            </div>
    <div class="left-topRight">
        <p class="p1">开放数据处理服务</p>
        <p class="p2">Open Data Processing Service</p></div>
            </div>
        <!-- header End -->
<div class="center-top">
    <!--数据流-->
    <div  class="center-top-num" >
        <marquee style="color:#afcdf5; text-shadow:#21358d 0 0 6px; font-size:9px;display: block; margin-left:5px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="7" width="50";>
            01 01 01 01 01 01 01 01 01 01 01 01
        </marquee>
        <marquee style="color:#afcdf5; text-shadow:#21358d 0 0 6px;  font-size:9px;" behavior="marquee" direction="right" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="8" width="40";>
            01 01 01 01 01 01 01 01 01 01 01 01 01
        </marquee>
    </div>
    <div  class="center-top-num1" >
        <marquee style="color:#afcdf5; text-shadow:#21358d 0 0 6px; font-size:9px;display: block; margin-left:5px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="7" width="50";>
            01 01 01 01 01 01 01 01 01 01 01 01
        </marquee>
        <marquee style="color:#afcdf5; text-shadow:#21358d 0 0 6px;  font-size:9px;" behavior="marquee" direction="right" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="8" width="40";>
            01 01 01 01 01 01 01 01 01 01 01 01 01
        </marquee>
    </div>
    <div  class="center-top-num2" >
        <marquee style="color:#afcdf5; text-shadow:#21358d 0 0 6px; font-size:9px;display: block; margin-left:5px;" behavior="scroll" direction="left" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="7" width="50";>
            01 01 01 01 01 01 01 01 01 01 01 01
        </marquee>
        <marquee style="color:#afcdf5; text-shadow:#21358d 0 0 6px;  font-size:9px;" behavior="marquee" direction="right" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="8" width="40";>
            01 01 01 01 01 01 01 01 01 01 01 01 01
        </marquee>
    </div>
    <!--数据流-->
	<div class="centertopTop">
    	<div class="circle"></div>
        <div class="mask-logo"></div>
        <div class="current">

        </div>
    </div>
    <div class="center-topBottom">
        <!--依次显示-->
        <div class="center-bnt solid center-bnt-ani2">Tools(Console/Eclipse Plugin/Flume/Fluntd)</div>
        <div class="center-bnt solid center-bnt-ani" style="position:absolute;top:50px;">Java SDK</div>
    	<div class="center-bnt center-bnt-ani" style="margin-bottom:21px; position:absolute;top:100px;">Rest API</div>
        <div class="center-bnt1">
        	<div class="center-leftBnt1">
            	<div class="leftBnt1-top">
                	<p class="number" style="font-family:lth;">数据<br>通道</p>
                    <div class="leftBnt1-right">
                    	<ul>
                        	<li class="current" style="margin-left:31px;">Stream</li>
                            <li>SQL</li>
                            <li>MR</li>
                            <li>Graph</li>

                                                        
                        </ul>
                        <p>计算</p>
                    </div>
                    <div class="leftBnt1-left">
                    	<ul>
                        	<li style="width:148px; margin:10px 90px 0 144px;">Table</li>

                            <li style="width:148px;">...</li>
                        </ul>
                        <p>存储</p>
                    </div>
                </div>
            </div>
            <div class="center-rightBnt1">meta</div>
        </div>
        <div class="center-font" style="font-family:lth;">阿里云飞天分布式文件系统</div>
        <!--依次显示-->
    </div>
</div>


<a href="odpsLast.html">
    <div class="font-left">
        <img class="rotate360_light" src="images/odps-leftbg.png"/>
        
        <img class="font-leftLogo" src="images/yishanyishan.png"/>
        <a href="odpsLast.html"><P class="liaojie">了解更多</P></a>
        <div class="font-font">
            <div class="mask-index"  style="display: none;"></div>
            <h3>按量付费</h3>
            <p>根据实际使用收费</p>
            <p>最大化降低数据使用成本</p>
        </div>
        <div class="font-font">
            <div class="mask-index1" style="display: none;"></div>
            <h3>数据存储安全可靠</h3>
            <p>三重备份  读写鉴权</p>
            <p>应用沙箱  系统沙箱</p>
            <p>多层次安全机制</p>
        </div>
    </div>
</a>
<footer id="footer-zw" class="clearfix">
    <div class="footer-left-zw fl">
        <a href="../index/index.html?goods=goods8" class="back-zw"></a>
        <a href="../index/index.html?goods=goods8" class="back-zw2"></a>
        <p><a href="../index/index.html?goods=goods8">返回主菜单</a></p>
    </div>
    <div class="footer-right-zw fr">
        <a href="" class="refresh-zw"></a>
        <a href="" class="refresh-zw2"></a>
        <p><a href="">刷新</a></p>
    </div>
</footer>
</body>
</html>
<script type="text/javascript" src="../bgAll/js/jquery-1.11.1.min.js"></script>
<!-- loading-->
<script src="../bgAll/js/fakeLoader.min.js"></script>
<script type="text/javascript" src='../bgAll/js/common.js'></script>
<script type="text/javascript"  src='../bgAll/js/waypoints.js'></script>
<script type="text/javascript"  src='../bgAll/js/star.js'></script>
<script>
    window.setTimeout(function(){
        $("#header").css("display","block");

    },600);

    $(".center-top").click(function(){
        //alert("ok")
        if($(".circle").is(":visible")==true){
            $(".circle").hide();
            $(".circle").siblings().show()
        }
    });

    var i=0;//设置为全局
    var timer=window.setInterval(function () {
       // console.log($(".leftBnt1-top li"))
        if(i==11){
            $(".leftBnt1-top li").removeClass("current");//删掉所有的class类名
           // console.log(4545)
            window.setTimeout(function () {
                i=0
            },500)
        }
        $(".leftBnt1-top li").removeClass("current");
        $(".leftBnt1-top li").eq(i).addClass("current");
        i++;
    },250);
    window.setTimeout(function(){$(".center-font").addClass("bounceInDown animated ").css("display","block")},1000);
    window.setTimeout(function(){$(".leftBnt1-left").addClass("bounceInDown animated ").css("display","block")},1500);
    window.setTimeout(function(){$(".leftBnt1-right").addClass("bounceInDown animated ").css("display","block")},2000);
    window.setTimeout(function(){$(".number").addClass("bounceInDown animated ").css("display","block")},2500);
    window.setTimeout(function(){$(".center-rightBnt1").addClass("bounceInDown animated ").css("display","block")},2500);
    window.setTimeout(function(){$(".center-bnt-ani").addClass("bounceInDown animated ").css("display","block")},3000);
    window.setTimeout(function(){$(".center-bnt").addClass("bounceInDown animated ").css("display","block")},3500);
    window.setTimeout(function(){$(".mask-index").css("display","block")},1000);
    window.setTimeout(function(){$(".mask-index1").css("display","block")},1000);




</script>